<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        message<input id="msg" type="text">
        <button onclick="getMessage()">点击</button>
        <p id="content">content</p>
    </div>

</body>
<script>

    var socket = new WebSocket('ws://localhost:8080/websocket');
    socket.onopen = function (event) {
        console.log("连接ws");
        
    }

    socket.onmessage = function (event) {
        let message = event.data;
        console.log(message);
        setInnerHTML(event.data);
    }

    socket.onerror = function (event) {
        console.log("出错了");
        console.log(event);
    }

    function setInnerHTML(value){
        document.getElementById("content").innerHTML = value;
    }

    function getMessage() {
        const msg = document.getElementById("msg").value;
        socket.send(msg);
    }

</script>

</html>